{% extends 'layout/base.html' %}
{% load netease %}
{% load profile %}
{% load static %}
{% load space %}


{% block css %}
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/blog/home.css' %}">
    <link rel="stylesheet" href="{% static 'css/blog/account.css' %}">
{% endblock css %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            // 处理用户头像
            $('.image-btn-prev').change(function () {
                $('#imageSubmit').click();
            });

            // 处理模态框
            // 添加音乐...
            $('#addModalSong').on('show.bs.modal', function (e) {
                var button = $(e.relatedTarget)
                var name = button.data('name');
                var modal = $(this);
                modal.find('.modal-title').text(name);

                // 清除错误数据
                modal.find('.error-msg').empty();
                $('#SongForm')[0].reset();
            });
            // 添加分类...
            $('#addModalCategory').on('show.bs.modal', function (e) {
                var button = $(e.relatedTarget)
                var name = button.data('name');
                var modal = $(this);
                modal.find('.modal-title').text(name);

                // 清除错误数据
                modal.find('.error-msg').empty();
                $('#categoryForm')[0].reset();
            });
            // 提交分类表单
            $('#category').click(function () {
                $.post('{% url 'blog:profile' %}', $('#categoryForm').serialize(), function (data) {
                    if (data.code === 200) {
                        location.href = '{% url 'blog:profile' %}';
                    } else {
                        $.each(data.msg, function (key, value) {
                            $('#id_' + key).next().text(value[0]);
                        });
                    }
                });
            });
            // 处理音乐添加
            $('#song').click(function () {
                $.get(location.href, $('#SongForm').serialize(), function (data) {
                    if (data.code === 200) {
                        location.href = '{% url 'blog:profile' %}';
                    } else {
                        $.each(data.msg, function (key, value) {
                            $('.error-song').text(value[0]);
                        });
                    }
                });
            });
            // 处理密码问题
            $('#modify-pwd').on('show.bs.modal', function (e) {
                var button = $(e.relatedTarget)
                var name = button.data('name');
                var modal = $(this);
                modal.find('.modal-title').text(name);

                // 清除错误数据
                modal.find('.error-msg').empty();
            });
            // 提交修改密码表单
            $('#modify-pwd-btn').click(function () {
                $.post('{% url 'blog:modify_password' %}', $('#modify-pwd-Form').serialize(), function (data) {
                    if (data.code === 200) {
                        alert(data.msg);
                        location.href = '{% url 'blog:profile' %}';
                    } else {
                        $.each(data.msg, function (key, value) {
                            $('#id_' + key).next().text(value[0]);
                        });
                    }
                });
            });
            // 处理价格策略
            $('#setPrice').on('show.bs.modal', function (e) {
                var button = $(e.relatedTarget)
                var name = button.data('name');
                var modal = $(this);
                modal.find('.modal-title').text(name);

                // 清除错误数据
                modal.find('.error-msg').empty();
            });
            $('#setPrice-btn').click(function () {
                $.post("{% url 'blog:setPrice' %}", $('#setPrice-Form').serialize(), function (data) {
                    if (data.code === 200) {
                        alert(data.msg);
                        location.href = "{% url 'blog:profile' %}";
                    } else {
                        $.each(data.msg, function (key, value) {
                            $('#id_' + key).next().text(value[0]);
                        });
                    }
                });
            });
        });
    </script>
{% endblock js %}


{% block title %}个人主页{% endblock title %}


{% block content %}
    <div class="row" style="margin-bottom: 100px">
        <div class="col-md-3 col-sm-4 hidden-xs left">
            {#            个人简介#}
            <table class="table">
                <tr>
                    <a href="#" class="image-btn">
                        <img style="height: 254px;
                                width: 254px;
                                margin-top: 10px;
                                margin-bottom: 45px;
                                border-radius: 50%;"
                             src="{{ request.user.image }}" alt="头像"/>
                    </a>
                    <form method="post" action="{% url 'blog:user_image' %}" enctype="multipart/form-data">
                        <input type="file" class="image-btn-prev" name="image">
                        <input type="submit" id="imageSubmit" class="hide" value="upload">
                    </form>
                </tr>
                <tr>
                    <th>{{ request.user.username|title }}</th>
                </tr>
                <tr>
                    <th>邮箱：</th>
                    <th>{{ request.user.email }}</th>
                </tr>
            </table>
            {% if request.user.is_super %}
                {#添加外链音乐#}
                {#                <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=255 height=52#}
                {#                        src="//music.163.com/outchain/player?type=0&id=454995617&auto=0&height=32"></iframe>#}
                {% netease_music request %}
            {% endif %}

        </div>
        <div class="col-md-9 col-sm-8 right">
            <!--
            公有操作
            1、修改密码
            2、显示评论
            -->
            <!--修改密码-->
            <div class="page-header" style="margin: 60px 15px 50px;">
                <h4>
                    <span>账户设置</span>
                    {#进入SaaS平台#}
                    <span style="float: right;padding-left: 10px"><a class="btn btn-default"
                                                                     href="{% url 'service:project_list' %}"
                                                                     role="button"> 进入SaaS服务</a></span>

                    <span style="float: right;padding-left: 10px"><a class="btn btn-default" href="#" role="button"
                                                                     data-toggle="modal" data-target="#modify-pwd"
                                                                     data-name="修改密码">
                            修改密码</a></span>
                </h4>
            </div>
            <!--显示评论-->
            <div class="comments-list">
                <div class="page-header" style="margin: 40px 15px 20px;">
                    <div>
                        <h4>
                            <span>历史评论</span>
                        </h4>
                    </div>

                </div>
                <table class="table table-condensed" style="margin-left: 15px;">
                    <thead>
                    <tr>
                        <th>博客标题</th>
                        <th>评论内容</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in userComment %}
                        <tr>
                            <td><a href="{% url 'blog:article' item.note.id %}"
                                   style="text-decoration: none;color: black">
                                {{ item.note.title }}
                            </a></td>
                            <td>{{ item.content }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if request.user.is_super %}
                {#管理员区域#}
                <!--
                1、api地址
                2、修改音乐播放ID
                3、博客分类
                -->
                <!--api接口地址-->
                <div class="page-header" style="margin: 60px 15px 50px;">
                    <h4>
                        <span>API</span>
                        <span style="float: right;padding-left: 10px"><a class="btn btn-default" href="/api/v1/"
                                                                         role="button">
                            V1 API</a></span>
                    </h4>
                </div>

                <!--价格策略-->
                <div class="page-header" style="margin: 60px 15px 6px;">
                    <h4>
                        <span>项目策略</span>
                        <span style="float: right;padding-left: 10px"><a class="btn btn-default" href="#" role="button"
                                                                         data-toggle="modal" data-target="#setPrice"
                                                                         data-name="添加策略">
                            修改策略</a></span>
                    </h4>
                </div>

                <table class="table table-condensed" style="margin-left: 15px;">
                    <thead>
                    <tr style="text-align: center">
                        <th>类型</th>
                        <th>标题</th>
                        <th>项目数量</th>
                        <th>成员数量</th>
                        <th>项目空间</th>
                        <th>单文件空间</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in price_policy %}
                        <tr>
                            <td>{{ item.get_category_display }}</td>
                            <td>{{ item.title }}</td>
                            <td>{{ item.create_project }}</td>
                            <td>{{ item.project_member }}</td>
                            <td>{% use_space_policy item.project_space %}</td>
                            <td>{% use_space_policy item.single_file_space %}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>


                <!--修改音乐播放ID-->
                <div class="page-header" style="margin: 40px 15px 20px;">
                    <div>
                        <h4>
                            <span>音乐设置</span>
                            <span style="float: right"><a class="btn btn-default" href="#" role="button"
                                                          data-toggle="modal" data-target="#addModalSong"
                                                          data-name="添加音乐">
                                                添加音乐</a></span>
                        </h4>
                    </div>

                </div>
                <table class="table table-condensed" style="margin-left: 15px;">
                    <thead>
                    <tr>
                        <th>歌曲ID</th>
                        <th>歌曲标题</th>
                        <th>歌单设置</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for item in song %}
                        <tr>
                            <td>{{ item.song_id }}</td>
                            <td>{{ item.title }}</td>
                            <td>
                                {% if item.is_play %}
                                    <a class="btn btn-success btn-xs" href="{% url 'blog:profile' %}?stop={{ item.id }}"
                                       role="button"><i class="fa fa-stop-circle"
                                                        aria-hidden="true"></i>
                                        暂停</a>
                                {% else %}
                                    <a class="btn btn-default btn-xs" href="{% url 'blog:profile' %}?play={{ item.id }}"
                                       role="button"> <i class="fa fa-play-circle"
                                                         aria-hidden="true"></i>
                                        播放</a>
                                {% endif %}
                                <a class="btn btn-danger btn-xs" href="{% url 'blog:profile' %}?delete={{ item.id }}"
                                   role="button">删除</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

                <!--博客分类-->
                <div class="page-header" style="margin: 60px 15px 20px;">
                    <h4>
                        <span>博客分类</span>
                        <span style="float: right;padding-left: 10px"><a class="btn btn-default"
                                                                         href="{% url 'blog:editor' %}" role="button">
                            添加博客</a></span>

                        <span style="float: right"><a class="btn btn-default" href="#" role="button"
                                                      data-toggle="modal" data-target="#addModalCategory"
                                                      data-name="添加分类">
                            添加分类</a></span>
                    </h4>
                </div>
                <div style="margin: 40px 15px 20px;">
                    {% for item in category %}
                        <div class="panel panel-default col-md-2" style="margin-bottom: 0">
                            {# 链接到详细页 #}
                            <a href="{% url 'blog:category' item.id %}" style="text-decoration: none; color: black">
                                <div class="panel-body" style="text-align: center">
                                    {{ item.name|title }}
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

        </div>
    </div>
    <!-- 音乐添加栏 -->
    <div class="modal fade" id="addModalSong" tabindex="-1" role="dialog" aria-labelledby="addModalSong">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModalSong">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="SongForm">
                        {% for field in song_form %}
                            <div class="form-group">
                                {{ field }}
                                <span class="error-msg error-song"></span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" id="song" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 分类添加栏 -->
    <div class="modal fade" id="addModalCategory" tabindex="-1" role="dialog" aria-labelledby="addModalCategory">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addModalCategory">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="categoryForm">
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" id="category" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 密码修改 -->
    <div class="modal fade" id="modify-pwd" tabindex="-1" role="dialog" aria-labelledby="modify-pwd">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modify-pwd">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="modify-pwd-Form">
                        {% csrf_token %}
                        {% for field in modify_form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" id="modify-pwd-btn" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>

    <!--设置价格策略-->
    <div class="modal fade" id="setPrice" tabindex="-1" role="dialog" aria-labelledby="setPrice">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="setPrice">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form id="setPrice-Form">
                        {% csrf_token %}
                        {% for field in price_form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" id="setPrice-btn" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}